<template>
  <div class="topBox">
    <img :src="image" alt="" srcset="" />
    <div class="inputSerachBox">
      <div class="inputSerachBox2">
        <input type="text" class="inputSerach" v-model="serachData" />
        <div class="blackCircle center">
          <el-icon color="white" @click="serachFn" class="RigthIcon"><Right /></el-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import Zh from '@/assets/i18n/langs/zh.js'
import En from '@/assets/i18n/langs/en.js'
import { ElNotification } from 'element-plus'
import { useRouter } from 'vue-router'
import { WarrantySerach } from '@/http/api/WarrantySerach.js'
const router = useRouter()
let pageData = reactive({
  page: 1,
  size: 10
})
let image = ref('messages.WarrantySerachData.topImage')
let serachData = ref('')
const getData = async () => {
  const res = await WarrantySerach(pageData)
  image.value = res.res[0].imageEn
}
const serachFn = () => {
  if (localStorage.getItem('userInfo') || localStorage.getItem('storeInfo')) {

    if (localStorage.getItem('userInfo')) {
      router.push(`/my?serachData=${serachData.value}`)
    } else {
      router.push(`/storeMy?serachData=${serachData.value}`)
    }
  } else {
    // router.push('/login')
    ElNotification({
      title: 'Hint',
      message: 'Please Log In',
      type: 'error',
    })
  }
}

onMounted(() => {
  getData()
})
</script>

<style lang="scss" scoped>
.topBox {
  width: 100%;
  height: 950px;
  position: relative;
  img {
    width: 100%;
    height: 100%;
  }
}
.inputSerach {
  border: none;
  width: 600px;
  height: 70px;
  border-radius: 20px;
  font-size: 18px;
}
.inputSerach:focus {
  border: none !important;
  outline: none;
}
.inputSerachBox {
  padding-left: 60px;
  cursor: pointer;
  position: absolute;
  top: 400px;
}
.inputSerachBox2 {
  cursor: pointer;
  width: 700px;
  height: 70px;
  border-radius: 20px;
  background: white;
}
.blackCircle {
  background: black;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  position: absolute;
  left: 680px;
  top: 50%;
  transform: translateY(-50%);
}
.RigthIcon {
  font-size: 25px;
}
</style>